<template>
	<view class="beijingse mainpadding" v-if="pageShow" style="padding-bottom: 150rpx;">
		<!-- 退款状态:0=申请退款,1=卖家同意,2=卖家拒绝,3=申请平台介入,4=成功退款,5=退款已关闭,6=已提交物流,7=第三方退款中,8=退款失败 -->
		<view class="" style="padding-bottom: 120rpx;">
				<view class="bigtext fonweight" v-if="dataAll.state==0">等待商家处理</view>
				<view class="bigtext fonweight" v-if="dataAll.state==1">等待买家寄回</view>
				<view class="bigtext fonweight" v-if="dataAll.state==6">等待卖家收货</view>
				<view class="bigtext fonweight" v-if="dataAll.state==2">卖家拒绝退款</view>
				<view class="bigtext fonweight" v-if="dataAll.state==4">退款成功</view>
				<view class="bigtext fonweight" v-if="dataAll.state==5">退款关闭</view>
				<view class="strongtext nofonweight margin_top1" v-if="dataAll.state==0">您已发起退款申请等待商家处理！</view>
				<view class="strongtext nofonweight margin_top1" v-if="dataAll.state==1">卖家已同意您的申请请将商品寄回！</view>
				<view class="strongtext nofonweight margin_top1"  v-if="dataAll.state==6">您已提交物流，等待商家确认收货！</view>
				<view class="strongtext nofonweight margin_top1" v-if="dataAll.state==2">{{dataAll.refuse_content}}</view>
				<view class="strongtext nofonweight margin_top1" v-if="dataAll.state==4">退款成功，期待下次和您的亲密接触</view>
				<view class="strongtext nofonweight margin_top1" v-if="dataAll.state==5">已取消售后</view>
				<!-- 地址 -->
				<view class="radius mainpadding ffffff margin_top" v-if="dataAll.state==1">
					<view class="titletext fonweight zhonghei">寄回地址</view>
					<view class="flexleft margin_top">
						<view class="titletext fonweight margin_right3 zhonghei">{{dataAll.shopConfig.returnName}}</view>
						<view class="titletext fonweight zhonghei">{{dataAll.shopConfig.returnPhoneNum}}</view>
					</view>
					<view class="titletext xiaohui margin_top2">{{dataAll.shopConfig.returnAddr}}</view>
				</view>
				<!-- 物流 -->
				<view class="radius mainpadding ffffff margin_top " v-if="dataAll.state==6">
					<view class="flexbetween">
						<view class="ershiba fonweight zhonghei">快递公司</view>
						<view class="ershiba  zhonghei">{{dataAll.express_name}}</view>
					</view>
					<view class="flexbetween margin_top">
						<view class="ershiba fonweight zhonghei">快递单号</view>
						<view class="ershiba  zhonghei">{{dataAll.express_no}}</view>
					</view>
				</view>
				<!--订单商品  -->
				<view class="ffffff radius margin_top mainpadding">
					<view class="ershiba zhonghei fonweight">退货商品</view>
					<view class="" v-for="item in dataAll.goods" :key="item.id">
						<view class="flexbetween margin_top" >
							<image class="sptp" :src="item.image_text" mode=""></image>
							<view class="" style="width: 77%;">
								<view class="ershiba xiaohei yhxk">{{item.title}}</view>
								<view class="flexbetween margin_top4">
									<view class="titletext xiaocheng">¥{{item.actual_payment}}</view>
									<view class="ershil xiaohui">x{{item.number}}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="ffffff radius mainpadding margin_top">
					<view class="flexbetween margin_top">
						<view class="ershil zhonghei">退货申请时间</view>
						<view class="ershil xiaohui">{{dataAll.createtime_text}}</view>
					</view>
					<view class="flexbetween margin_top">
						<view class="ershil zhonghei">退款原因</view>
						<view class="ershil xiaohui">{{dataAll.reason}}</view>
					</view>
					<view class="flexbetween margin_top">
						<view class="ershil zhonghei">申请原因</view>
						<view class="ershil xiaohui">{{dataAll.refund_content}}</view>
					</view>
					<view class="flexbetween margin_top">
						<view class="ershil zhonghei">退款金额</view>
						<view class="ershil xiaohui">￥{{dataAll.price}}</view>
					</view>
				</view>
		</view>
		<!-- 退款状态:0=申请退款,1=卖家同意,2=卖家拒绝,3=申请平台介入,4=成功退款,5=退款已关闭,6=已提交物流,7=第三方退款中,8=退款失败 -->
		<view class="gudingdb ffffff mainpadding flexright" v-if="dataAll.state!=3 || dataAll.state!=6">
			<view class="qxbtn flexcenter margin_left" v-if="dataAll.state==0" @click="currentid=listid;showModal('是否确认取消申请？')">取消申请</view>
			<view class="xhbtn flexcenter margin_left" @click="tztxdh(listid)" v-if="dataAll.state==1">填写单号</view>
			<view class="xhbtn flexcenter margin_left"  @click="currentid=listid;showModal('是否确认删除订单？')" v-if="dataAll.state==2 || dataAll.state==4 || dataAll.state==5">删除订单</view>
		</view>
		<moDal :message="modal" @modalSure="modalSure" @modalcancel="modalcancel"></moDal>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				listid:"",
				dataAll: {},
				pageShow: false,
				modal:{
					modalShow:false,
					title:"",
				},
				currentid:"",
			}
		},
		onLoad(options) {
			this.listid = options.id
		},
		onShow() {
			this.getDetail()
		},
		methods: {
			showModal(val){
				this.modal.title = val
				this.modal.modalShow = true
			},
			modalSure(){
				if(this.modal.title=="是否确认取消申请？"){
					this.cancelorder(this.currentid)
				}else if(this.modal.title=="是否确认删除订单？"){
					this.deleteorder(this.currentid)
				}
				this.modalcancel()
			},
			modalcancel(){
				this.modal.modalShow = false
			},
			cancelorder(id) {
				httpRequest.request('/api/order/closeRefund', 'POST', {
					id: id,
				}).then(res => {
					httpRequest.toast(res.msg)
					this.getDetail()
				})
			},
			deleteorder(id) {
				httpRequest.request('/api/order/delRefundOrder', 'POST', {
					id: id,
				}).then(res => {
					httpRequest.toast(res.msg)
					setTimeout(() => {
						uni.navigateBack(1)
					}, 1000)
				})
			},
			getDetail() {
				httpRequest.request('/api/order/getRefundInfo', 'GET', {
					id: this.listid
				}, false, false, true).then(res => {
					this.dataAll = res.data
					this.pageShow = true
				})
			},
			// 跳转填写单号
			tztxdh(id){
				uni.navigateTo({
					url:'/pages_mypage/tianxiedh?id='+id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.hexm{
		width: 167rpx;
		height: 167rpx;
		margin: auto;
		image{
			width: 100%;
			height: 100%;
		}
	}
	.xhbtn {
		width: 170rpx;
		height: 67rpx;
		font-size: 26rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		color: #FF9341;
		border-radius: 120rpx;
		border: 2rpx solid #FF9341;
	}
	.qxbtn {
		width: 170rpx;
		height: 67rpx;
		font-size: 26rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		color: #666666;
		border-radius: 120rpx;
		border: 2rpx solid #666666;
	}
	.sptp {
		width: 124rpx;
		height: 124rpx;
		border-radius: 14rpx 14rpx 14rpx 14rpx;
	}
</style>
